<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>CSS 上下左右四个方向箭头</title>
    <style>
        i {
            border: solid black;
            border-width: 0 3px 3px 0;
            display: inline-block;
            padding: 3px;
        }

        .right {
            transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
        }

        .left {
            transform: rotate(135deg);
            -webkit-transform: rotate(135deg);
        }

        .up {
            transform: rotate(-135deg);
            -webkit-transform: rotate(-135deg);
        }

        .down {
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
        }
    </style>
</head>

<body>
    <h2>CSS 方向</h2>

    <p>向右: <i class="right"></i></p>
    <p>向左: <i class="left"></i></p>
    <p>向上: <i class="up"></i></p>
    <p>向下: <i class="down"></i></p>
</body>

</html>